<template>
  <div ref="infiniteBox">
    <router-link to="/search" class="search">
      <div class="search">
        <input id="searchInput" type="text">
        <label for="searchInput"><i class="iconfont icon-search"></i>搜索商家</label>
      </div>
    </router-link>
    <div class="business">
      <section class="title">
        <h2 class="caption-left-cursor hairlines-bottom">
          全部商家
        </h2>
      </section>
      <business-lists :datas="businessLists" :isLoading="isLoading" :end="isEnd"></business-lists>
    </div>
    <nav-tem :activeIndex="activeIndex"></nav-tem>
  </div>
</template>
<script>
  import Nav from '@/components/index/nav'
  import BusinessLists from '@/components/business-lists/lists'

  export default {
    name: 'server',
    components: {
      'nav-tem': Nav,
      'business-lists': BusinessLists
    },
    data () {
      return {
        title: '爱尚丰',
        activeIndex: 1,
        page: 1,
        maxPage: 1,
        busy: false,
        isLoading: false,
        isEnd: false,
        businessLists: []
      }
    },
    methods: {
      getBusinessLists () {
        if (this.page > this.maxPage) {
          window.removeEventListener('scroll', this.scrollEvent)
          this.isEnd = true
          return
        }
        this.isLoading = true
        this.axios.post('/api/service/index', {
          page: this.page,
          lng: this.$store.state.lng,
          lat: this.$store.state.lat
        })
        .then((res) => {
          let data = res.data
          this.maxPage = data.max_page
          this.businessLists = this.businessLists.concat(data.service_list)
          this.page++
          this.$nextTick(() => {
            this.isLoading = false
            this.busy = false
          })
        })
        .catch((error) => {
          console.log('请求超时' + error)
        })
      },
      InfiniteScroll (ele) {
        this.wHeight = window.innerHeight
        this.scrollHeight = ele.offsetHeight
        this.scrollTop = 0
        this.distance = 10
        window.addEventListener('scroll', this.scrollEvent)
      },
      scrollEvent () {
        let scrollTop = document.body.scrollTop
        if (scrollTop + this.wHeight + this.distance > this.scrollHeight && !this.busy) {
          this.busy = true
          this.getBusinessLists()
        }
      }
    },
    created () {
      this.setTitle(this.title)
      this.getBusinessLists()
    },
    updated () {
      if (this.page === 2) {
        this.$nextTick(() => {
          this.InfiniteScroll(this.$refs.infiniteBox)
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .search{
    position: relative;
    padding: rem(20) 0;
    background: #72a5ef;
    text-align: center;
    font-size: rem(24);
    input{
      display: block;
      margin: 0 auto;
      padding: 0 rem(15);
      width: 80%;
      height: rem(60);
      border-radius: 4px;
      font-size: rem(24);
      color: #333;
    }
    label{
      position: absolute;
      top: rem(20);
      left: 0;
      width: 100%;
      height: rem(60);
      line-height: rem(60);
      color: #999;
      .iconfont{
        margin-right: rem(10);
        font-size: rem(30);
      }
    }
    input:focus + label{
      opacity: 0;
    }
  }
  .business{
    .title{
      padding: 0 rem(24);
      background: #fff;
    }
  }
</style>
